<!--
 * @Author: yongtian.hong
 * @Date: 2019-01-10 13:35:38
 * @LastEditors: yongtian.hong
 * @LastEditTime: 2019-01-12 17:14:58
 * @Description: 滚动组件
 -->


<style lang='scss' scoped>
.wheel-wrapper {
    overflow: hidden;
}
</style>

<template>
    <div class="wheel-wrapper" ref="wheelWraper">
        <div class="content">
            <slot ref="content"></slot>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
    data() {
        return {}
    },
    methods: {
        //创建滚动
        createScroll() {
            this.scroll = new BScroll(this.$refs.wheelWraper, {
                preventDefault: true,
                probeType: 3,
                mouseWheel: {
                    speed: 20,
                    invert: false,
                    easeTime: 300
                }
            });
            this.scroll.on('scrollEnd', () => {

            })
        },
        // 初始化滚动
        initScroll() {
            if (!this.scroll) {
                this.createScroll();
            } else {
                this.scroll.refresh();
            }
        },
    },
    created() {

    },
    mounted() {
        this.$nextTick(() => {
            this.initScroll();
        })
        if (this.scroll) {
            window.onresize = () => {
                this.scroll.refresh()
            }
        }

    }
}
</script>